newUserWizardUi = Ext.extend(Ext.Window, {
   title: 'Add new user wizard'
   //,width: 300
   //,height: 200
   ,autoWidth: true
   ,autoHeight: true
   ,modal: true
   ,layout: 'auto'
   ,initComponent : function()
   {
        this.items = [ this.userForm ];
        newUserWizardUi.superclass.initComponent.call(this);
   }
   , userForm : {
       xtype: 'form'
       ,id: 'newUserForm'
       ,ref: '../newUserForm'
       ,padding: 5
       ,monitorValid: true
       ,defaults:{
           allowBlank: false
           ,xtype :'textfield'
       }
       ,autoWidth: true
       ,autoHeight: true
       ,items: [
           {
               fieldLabel: 'Username'
               ,name: 'username'
               ,maskRe: /^[0-9a-z_.@]$/
               ,regex: /^\w{3,20}$/
               ,regexText: '3-20 letters required'
           }
           ,{
               fieldLabel: 'Email'
               ,name: 'email'
               ,vtype : 'email'
           }
           ,{
               id: 'newUserPwd'
               ,inputType: 'password'
               ,fieldLabel: 'Password'
               ,name: 'password'
           }
           ,{
               inputType: 'password'
               ,fieldLabel: 'Confirm password'
               ,vtype: 'password'
               ,name: 'passwordConfirmation'
               ,initialPassField: 'newUserPwd'
               ,submitValue:false
           }
       ]
       ,buttonAlign: 'left'
       ,buttons: [
           {
               text: 'Save'
               ,iconCls: 'user-add'
               ,id: 'saveNewUser'
               ,formBind: true
               ,disabled: true
           }
           ,{
               text:'Cancel'
               ,id: 'closeNewUserWizard'
           }
       ]
   }
});